<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <!--  @click="$router.back(-1)" -->
                <div class="fls">
                    <!-- <img src="../../../static/images/icon-back.png" alt=""> -->
                </div>
                <div class="centern">团队邀请</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <div class="bg_color">
            <div class="header_top">
                <div class="headetit">伙伴您好！</div>
                <div class="edacr">
                    <div class="teep">{{this.$route.query.teamName}}</div>
                    <div class="abtou">邀请您加入</div>
                </div>
            </div>

            <div class="modality">
                <div class="topname">手机号码</div>
                <div class="inputField">
                    <div class="left">
                        <input type="number" v-model="phone" placeholder="请输入手机号码">
                    </div>
                </div>

                <div class="topname">验证码</div>
                <div class="inputField">
                    <div class="left_code">
                        <input type="number" v-model="code" placeholder="请输入验证码">
                    </div>
                    <div class="right">
                        <van-button plain :loading="codestype"  :disabled="codestype" v-if="codeShow" type="info" class="youbiande" loading-text="发送中..." block @click="getPhoneCodeqianyi()">获取验证码</van-button>
                        <van-button plain v-if="!codeShow" type="info" class="youbiande" block >{{count}}秒后重试</van-button>
                    </div>
                </div>

                <div class="topname">备注内容</div>
                <div class="inputField">
                    <div class="left">
                        <input type="text" v-model="remake" placeholder="例：我是......">
                    </div>
                </div>


                <div class="inttebs">
                    <div class="intbvdbf">
                        <van-checkbox v-model="checked" shape="square" icon-size="20px"></van-checkbox>
                    </div>
                    <div class="trtsbbds">
                        <span>我已阅读并同意</span>
                        <span>《银盛商户注册及服务协议》</span>
                        <span>和</span>
                        <span>《银盛助手隐私政策》</span>
                    </div>
                </div>

                <van-button :loading="typelio"  :disabled="typelio"  type="info" class="intgebv" loading-text="正在加载..." block @click="reviews()">确定</van-button>

            </div>
        </div>

    </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant';
import api from '../../api/managemenTteam'
Vue.prototype.$api = api
// import { set } from 'vue/types/umd';
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#fff')
    },
    data(){
        return{
            typelio:false,
            checked: true,
            codestype:false,
            codeShow: true,  //判断显示隐藏
            count: '',     //显示时的文字内容
            timer: null,

            phone:'',//手机号
            code:'',
            remake:'',

            inviteId:this.$route.query.inviteId, //邀请人id
            teamId:this.$route.query.teamId,//
        }
    },
    mounted(){
        console.log();
        alert(JSON.stringify(this.$route.query.teamName))
    },
    methods:{
        //  确定及注册
        liogining(){
            if(this.phone == ''){
                Toast('请输入手机号码');
                return;
            }
            if(this.code == ''){
                Toast('请输入验证码');
                return;
            }
            this.typelio = true

        },
        // 获取手机验证码
        getPhoneCodeqianyi(){
            if(this.phone == ''){
                Toast('请输入手机号码');
                return;
            }
            this.codestype = true
            setTimeout(() => {
                this.codestype = false
                this.getPhoneCode()
            }, 1000);
        },
         getPhoneCode() {
            const params ={
                phoneNo: this.phone,//手机号
                type: 'REGISTER',//短信类型.
            }
            this.$api.sendSms(params).then((res) =>{
                console.log(res)
                if(res.status == '0000'){
                     //点击获取验证码
                    const TIME_COUNT = 60;  //倒计时60秒
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.codeShow = false;
                        this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.codeShow = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                        }, 1000);
                    }
                }else{
                    Toast(res.describe);
                }
            })
        },


        // 点击申请入团
        reviews(){
            if(this.phone == ''){
                Toast('请输入手机号码');
                return;
            }
            if(this.code == ''){
                Toast('请输入验证码');
                return;
            }
            if(this.remake == ''){
                Toast('请填写备注内容');
                return;
            }
            const data = {
                teamId:'6039b8c4966f16371715b4a6',//团队ID
                phoneNo:this.phone,//手机号
                checkValue:this.code,//手机验证码
                description:this.remake,//申请备注
                inviteId:'6032735efa082ada41dca699',//邀请人id
            }
            this.$api.reviews(data).then((res)=>{
                console.log(res)
                if(res.status == ''){
                    Toast('申请成功,等待审核');
                }else{
                    Toast(res.payload);
                }
            })
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .bg_color{
        width: 100%;
        height: 200px;
        background: #3288FF;
        position: relative;
    }

    .header_top{
        width: 100%;
        /* height: 100%; */
        padding: 16px 16px 0 16px;
        box-sizing: border-box;
    }
    .headetit{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 20px;
    }
    .edacr{
        width: 100%;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .teep{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 22px;
    }
    .abtou{
         color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 18px;
    }

    .modality{
        width: 100%;
        background: #fff;
        border-radius: 24px 24px 0px 0px;
        padding: 40px 16px 16px 16px;
        box-sizing: border-box;
    }

    .topname{
        width: 100%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
    }

    .inputField{
        width: 100%;
        margin-top: 8px;
        padding: 16px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .inputField>.left{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .inputField>.left>input{
        width: 100%;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        border: 0;
    }
    .left_code{
        width: 80%;
        display: flex;
        align-items: center;
    }
        .inputField>.left_code>input{
        width: 100%;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        border: 0;
    }



    button{
        padding: 0 !important;
    }

    .youbiande{
        width: 88px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .inttebs{
        width: 100%;
        /* padding: 0 30px; */
        box-sizing: border-box;
        /* margin-top: 30px; */
        display: flex;
        align-items: flex-start;
        /* justify-content: space-between; */
    }

    .trtsbbds{
        width: 70%;
        /* display: flex; */
        /* text-align: center; */
        margin-left: 16px;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 12px;
        letter-spacing: 0px;
        display: inline-block;
    }
    .trtsbbds>div{
        display: inline-block;
    }

    .intgebv{
        margin-top: 25px;
    }
</style>